<template>
	<view class="page_body">


		<!-- 背景图 -->
		<view class="c_background_box">
			<image class="c_background_box_img" mode="aspectFill" :src="bgImage"></image>
		</view>
		
		<view style="height: 133px;"></view>

		<view v-if="hasLogin" class="c_user_info_box" @click="gotoHomePage()">

			<!-- 头像 -->
			<view style="flex-direction: row;">
				<u-avatar :src="userInfo.avatar" size="70" mode="aspectFill"></u-avatar>
			</view>

			<!-- 昵称 -->
			<view class="c_user_info">
				<view class="user_nick_info">
					<text class="user_nick">{{userInfo.displayName}}</text>
				</view>

				<view class="user_tags">
					<view class="tag_item">
						<text class="tag_num">{{userInfo.likeCount||0}}</text>
						<text class="tag_txt">获赞</text>
					</view>
					<view class="tag_item">
						<text class="tag_num">{{userInfo.followCount||0}}</text>
						<text class="tag_txt">关注</text>
					</view>
					<view class="tag_item">
						<text class="tag_num">{{userInfo.fansCount||0}}</text>
						<text class="tag_txt">粉丝</text>
					</view>
				</view>
			</view>
		</view>

		<view v-if="!hasLogin" class="c_user_info_box_no_login">
			<view class="login_btn" @click.stop="gotoLogin">立即登录/注册</view>
		</view>



		<view class="article_box">
			<view class="article_box_head">
				<view class="article_box_son" @click="gotoPage('/pages/center/myArticle',true)">
					<image class="card_vip" src="/static/icon/user_center/icon_article.png" mode=""></image>
					<text>帖子</text>
				</view>

				<view class="article_box_son" @click="gotoPage('/pages/center/myReply',true)">
					<image class="card_vip" src="/static/icon/user_center/icon_comment.png" mode=""></image>
					<text>评论</text>
				</view>

				<!-- <view class="article_box_son" @click="gotoPage('/pages/center/myArticle',true)">
					<image class="card_vip" src="/static/icon/user_center/icon_collect.png" mode=""></image>
					<text>收藏</text>
				</view> -->

				<view class="article_box_son" @click="gotoPage('/pages/center/myLIke',true)">
					<image class="card_vip" src="/static/icon/user_center/icon_like.png" mode=""></image>
					<text>赞过</text>
				</view>
			</view>
		</view>



		<!-- 广告 -->
<!-- 		<view class="ad_box">
			<image class="ad_img" src="/static/icon/user_center/tuijian.jpg" />
		</view> -->

		<!-- 其他工具 -->
		<view class="other_opt_box">
			<view v-for="(opt,index) in otherOptList" :key="index" class="opt_box" @click="gotoPage(opt.url,opt.needLogin)">
				<image class="opt_icon" :src="opt.icon"></image>
				<text class="opt_txt">{{opt.name}}</text>
				<image class="opt_more" src="/static/icon/user_center/icon_more.png"></image>
			</view>
		</view>


		<!-- 底部导航栏	 -->
		<tabbar :currentTabbar="4"></tabbar>


	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				// 是否已登录
				hasLogin: false,
				// 背景图片
				bgImage: '/static/bg/bg2.jpg',
				// 用户信息
				userInfo:{

				},
				// 其他操作
				otherOptList: [{
						icon: '/static/icon/user_center/icon_history.png',
						name: '浏览记录',
						url: '认证后增加真实度',
						needLogin: false
					},
					{
						icon: '/static/icon/user_center/icon_help.png',
						name: '帮助与反馈',
						url: '',
						needLogin: false
					},
					{
						icon: '/static/icon/user_center/icon_share.png',
						name: '推荐给好友',
						url: '邀请好友领会员',
						needLogin: false
					},
					{
						icon: '/static/icon/user_center/icon_set.png',
						name: '设置',
						url: '/pages/center/set',
						needLogin: false
					}
				],

			}
		},
		async created() {
			let bg = this.$store.state.common.bgImageSetUp.center
			if (bg){
				this.bgImage = bg
			}
			this.hasLogin = this.$authUtil.isLoginedin()
			if(this.hasLogin){
				 await this.$store.dispatch('getUserInfo');
			}	
		},
		async onShow() {
			this.hasLogin = this.$authUtil.isLoginedin()
			this.$nextTick(()=>{
				this.userInfo = this.$store.state.user.info
				this.getFollowCoun()
			})
		},
		methods: {
			// 关注和粉丝数
			getFollowCoun(){
				if(this.hasLogin){
					this.$httpApi.baseUserGet('user/follow/follow_and_fans_count').then(({ data }) => {
						if (data.code == "000000") {
							if(data.data){
								this.userInfo.likeCount = data.data.like
								this.userInfo.followCount = data.data.follow
								this.userInfo.fansCount = data.data.fans
							}
						}
					})
				}
			},
			// 个人主页
			gotoHomePage() {
				if(this.hasLogin){
					uni.navigateTo({
						url: '/pages/center/userHomePage'
					})
				}
			},
			// 前往页面
			gotoPage(urls,needLogin){
				if(needLogin && !this.hasLogin){
					uni.$u.toast('请登录')
					return false
				}
				uni.navigateTo({
					url: urls
				})
			},
			// 前往登录
			gotoLogin(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},




		}
	}
</script>

<style lang="scss">


	//背景
	.c_background_box {
		position: absolute;
		left: 0;
		right: 0;
		transform: scale(1);
		background-color: transparent;
	}

	.c_background_box_img {
		width: 750upx;
		opacity: 0.7;
		height: 310px;
		transition-timing-function: ease;
		transition-duration: 0.1s;
		transition-property: transform;
	}

	.c_user_info_box {
		z-index: 9;
		padding: 0 15px;
		display: flex;
		flex-direction: row;
	}
	.c_user_info_box_no_login {
		z-index: 9;
		padding: 0 15px;
		height: 88px;
		display: flex;
		flex-direction: row;
		justify-content:center;
		align-items: center;
	}
	.login_btn{
		border-radius: 20px;
		width: 120px;
		font-size: 15px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #55AAFF;
		background-color: #FFFFFF;
	}

	.c_user_info {
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-left: 15px;
		margin-top: 1px;
	}

	.user_nick_info {
		flex: 1;
		flex-direction: row;
		align-items: center;
		margin-top: 15px;
		margin-bottom: 5px;
		line-height: 25px;
		height: 25px;
	}

	.user_vip_img {
		width: 20px;
		height: 20px;
		margin: 0 2px;
		align-items: center;
	}

	.user_nick {
		font-size: 19px;
		font-weight: 600;
		color: #FFFFFF;
	}


	.user_tags {
		display: flex;
		flex-direction: row;
		line-height: 20px;
		height: 20px;
		padding-bottom: 20px;
	}

	.tag_item {
		flex-direction: row;
		margin-right: 15px;
		align-items: center;
	}

	.tag_num {
		font-size: 14px;
		font-weight: 500;
		align-items: center;
		color: #FFFFFF;
		margin-right: 5px;
	}

	.tag_txt {
		font-size: 13px;
		color: #FFFFFF;
	}


	.article_box {
		border-radius: 8px;
		z-index: 9;
		background-color: #FFFFFF;
		margin: 0 10px;
	}

	.article_box_head {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}

	.article_box_son {
		display: flex;
		flex-direction: column;
		margin: 15px 0;
		text-align: center;
		width: 30px;
	}

	.article_box_son image {
		width: 30px;
		height: 30px;
	}

	.article_box_son text {
		font-size: 15px;
		color: #333;
		margin-top: 5px;
	}


	// 广告
	.ad_box {
		margin-top: 10px;
		padding: 10px;
		flex-direction: row;
	}

	.ad_img {
		height: 170upx;
		border-radius: 5px;
		width: 710upx;
	}

	.other_opt_box {
		display: flex;
		background-color: #FFFFFF;
		flex-direction: column;
		border-radius: 5px;
		margin: 10px;
		border: #efefef solid 1px;
	}

	.opt_box {
		display: flex;
		flex-direction: row;
		margin: 0 5px;
		padding: 5px;
		height: 40px;
		border-bottom: #f5f7fa solid 1px;
	}

	.opt_icon {
		margin-top: 7px;
		height: 26px;
		width: 26px;
		margin-right: 4px;
	}

	.opt_txt {
		flex: 1;
		font-size: 15px;
		color: #333;
		height: 40px;
		line-height: 40px;
	}

	.opt_more {
		margin-top: 9px;
		height: 22px;
		width: 22px;
	}
</style>
